<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Draw Grid Point</title>
	<style>
		#control{
			width: 1000px;
			margin: 50px auto 10px auto;
			display: flex;
			gap: 20px;
			align-items: center;
		}

		#container{
			width: 1000px;
			height: 500px;
			border: 1px solid black;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="control">
		<div>水平网格宽度 <input type="range" min="10" max="50" value="10" id="input-range-gridwidth" oninput="draw()"></div>
		<div>垂直网格高度 <input type="range" min="10" max="50" value="10" id="input-range-gridheight" oninput="draw()"></div>
		<div>点尺寸 <input type="range" min="1" max="10" value="2" id="input-range-pointsize" oninput="draw()"></div>
		<div>点颜色 <input type="color" value="#000000" id="input-range-pointcolor" oninput="draw()"></div>
	</div>
	<div id="container"></div>
	<script type="module">

		import DrawGridPoing from '../index.js';

		function draw(){
			DrawGridPoing('#container', {
				gridWidth: document.getElementById('input-range-gridwidth').value,
				gridHeight: document.getElementById('input-range-gridheight').value,
				pointSize: document.getElementById('input-range-pointsize').value,
				pointColor: document.getElementById('input-range-pointcolor').value
			});
		}

		draw();

		window.draw = draw;
	</script>
</body>
</html>